import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: root
    color: "#f5f5f5"
    radius: 4
    
    property int spinBoxValue: spinBox.value

    ColumnLayout {
        id: layout
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "自定义步长的SpinBox"
            font.bold: true
            font.pixelSize: 14
        }

        RowLayout {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter
            spacing: 10

            SpinBox {
                id: spinBox
                implicitHeight: 25
                from: -100
                to: 100
                stepSize: 10
                value: 0
                editable: true

                // 自定义显示格式
                textFromValue: function(value, locale) {
                    return value + "°"
                }
                
                // 自定义输入处理
                valueFromText: function(text, locale) {
                    return Number.fromLocaleString(locale, text.replace("°", ""))
                }
            }

            // 步长控制
            ComboBox {
                id: stepControl
                implicitHeight: 25
                model: ["1", "5", "10", "15", "20"]
                onCurrentTextChanged: {
                    spinBox.stepSize = Number(currentText)
                }
            }
        }

        Text {
            text: "当前值：" + spinBox.value + "°，步长：" + spinBox.stepSize
            Layout.alignment: Qt.AlignLeft
        }

        Text {
            text: "说明：可以通过下拉框改变步长，支持负数，适合角度等数值输入"
            font.pixelSize: 12
            color: "#666666"
            wrapMode: Text.WordWrap
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
} 
